<template>
    <div style="height: 280px">
        <p class="title">农产品价格一览</p>
        <ul class="nav-list">
            <li v-for="item in navList" :key="item">{{ item }}</li>
        </ul>
        <vue3ScrollSeamless class="scroll-wrap" :classOptions="classOptions" :dataList="list">
            <ul class="ui-wrap">
                <li
                    class="li-item"
                    v-for="(item, i) of list"
                    :key="i"
                    :style="{
                        background: i % 2 == 0 ? 'rgb(54, 97, 189,0.7)' : ''
                    }"
                >
                    <span>{{ item.name }}</span>
                    <span>{{ item.todayPrice }}元/斤</span>
                    <span>{{ item.yestodayPrice }}元/斤</span>
                    <span>{{ item.futurePrice }}元/斤</span>
                </li>
            </ul>
        </vue3ScrollSeamless>
    </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import { vue3ScrollSeamless } from 'vue3-scroll-seamless'

import { List } from '../../constant'

export default defineComponent({
    name: 'LeftCenterBar',
    components: { vue3ScrollSeamless },
    setup() {
        const constant = {
            classOptions: {
                step: 0.4
            },
            navList: ['农产品名', '今日价格', '昨日价格', '未来预测']
        }

        const state = reactive({
            list: List
        })

        return {
            ...toRefs(state),
            ...constant
        }
    }
})
</script>
<style lang="scss" scoped>
.title {
    width: 100%;
    padding: 3px 0;
    margin: 0;
    text-align: center;
    color: #ffffff;
    font-size: 20px;
    font-weight: bold;
}
.nav-list {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 5px 0;
    li {
        flex: 0.25;
        font-weight: bold;
        list-style: none;
        padding: 5px 0;
        text-align: center;
        color: #ffffff;
    }
}
.scroll-wrap {
    height: 220px;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}
.ui-wrap {
    list-style: none;
    padding: 0;
    margin: 0 auto;
}
.li-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px 20px 10px 0;
    text-align: center;
    border-radius: 5px;
    transition: all 0.3s cubic-bezier(0.2, 0, 0, 1) 0s;
    cursor: pointer;
    &:hover {
        background: rgb(63, 124, 255) !important;
    }
    span {
        flex: 0.25;
        text-align: center;
        color: #ffffff;
    }
}
</style>
